<template>
  <div>
    <Hander/>
    <van-row>
<!--      <van-col>-->


<!--      </van-col>-->
      <van-row>
        <van-col>
          <Left/>
        </van-col>

        <van-col>
          <h1>查看我的公告</h1>
          <van-button @click="tianjia" style="width: 100px;background-color: aqua;border: 1px">+  新增</van-button>

          <div>
            <table cellspacing="0" cellpadding="0" border="1" style="border-color: gray;text-align: center" width="1000px" height="80px">
              <tr>
                <td>序号</td>
                <td>标题</td>
                <td>消息类型</td>
                <td>发布人</td>
                <td>优先级</td>
                <td>通告对象</td>
                <td>状态</td>
                <td>执行人</td>
                <td>发布时间</td>
                <td>操作</td>
              </tr>
              <tr v-for="i in messagelist" :key="i">
                <td>{{i.id}}</td>
                <td>{{i.title}}</td>

                <td v-if="i.type==1">通知公告</td>
                <td v-else>系统消息</td>

                <td>{{i.username}}</td>

                <td v-if="i.priority==1">低</td>
                <td v-else-if="i.priority==2">中</td>
                <td v-else>高</td>


                <td v-if="i.designate==1">指定用户</td>
                <td v-else>全体用户</td>


                <td v-if="i.status==1">已发布</td>
                <td v-else style="color: red">未发布</td>


                <td v-if="i.userlist">{{i.userlist}}</td>
                <td v-else>无指定人</td>

                <td>{{i.stime}}</td>
                <td>
                  操作

                </td>
              </tr>
            </table>
          </div>
<!--          <el-table :data="messagelist" style="width: 100%">-->
<!--            <el-table-column prop="id" label="序号" width="200" />-->
<!--            <el-table-column prop="title" label="标题" width="180" />-->
<!--            <el-table-column prop="type" label="消息类型" width="50"/>-->
<!--            <el-table-column prop="username" label="发布人" width="50"/>-->
<!--            <el-table-column prop="priority" label="优先级" width="50"/>-->
<!--            <el-table-column prop="designate" label="通告对象" width="180"/>-->
<!--            <el-table-column prop="status" label="状态" width="50"/>-->
<!--            <el-table-column prop="userlist" label="执行人" width="180"/>-->
<!--            <el-table-column prop="stime" label="发布时间" width="250" />-->
<!--            <el-table-column label="操作" width="180"/>-->
<!--          </el-table>-->







          <el-dialog v-model="outerVisible" title="新增" width="60%">
                <h1>发布通知</h1>

                <van-row>
                  <van-col>
                    <div>
                      <el-form>
                        <el-form-item label="标题" style="padding-left: 30px">
                          <el-input placeholder="请输入标题" v-model="form.title" style="width: 400px;"/>
                        </el-form-item>

                        <el-form-item label="开始时间">
                          <el-date-picker v-model="form.stime" type="date" placeholder="请选择开始时间"  style="width: 400px;"  value-format="YYYY-MM-DD">
                          </el-date-picker>

                        </el-form-item>


                        <el-form-item label="优先级" style="padding-left: 15px">
                          <el-select v-model="form.priority" placeholder="请选择优先级"  style="width: 400px;">
                            <el-option label="低" value="1"></el-option>
                            <el-option label="中" value="2"></el-option>
                            <el-option label="高" value="3"></el-option>
                          </el-select>
                        </el-form-item>


                        <el-form-item label="指定用户" v-if="form.designate==1">
                          <el-input placeholder="请选择用户" v-model="form.userlist" style="width: 400px;" @click="userlists"/>
                        </el-form-item>
                        <el-form-item v-else>

                        </el-form-item>




                      </el-form>






                    </div>
                  </van-col>

                  <van-col>
                    <div style="padding-left: 100px">
                      <el-form>
                        <el-form-item label="消息类型">
                          <el-select v-model="form.type" placeholder="请选择消息类型" style="width: 400px">
                            <el-option label="通知公告" value="1"></el-option>
                            <el-option label="系统消息" value="2"></el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label="结束时间">
                          <el-date-picker v-model="form.etime" type="date" placeholder="请选择结束时间" style="width: 400px" value-format="YYYY-MM-DD">
                          </el-date-picker>

                        </el-form-item>


                        <el-form-item label="通告类型">
                          <el-select v-model="form.designate" placeholder="请选择通告类型" style="width: 400px">
                            <el-option label="指定用户" value="1"></el-option>
                            <el-option label="全体用户" value="2"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>

                    </div>


                  </van-col>

                </van-row>
                <div>
                  <el-form>
                    内容 :<TEDitor v-model="form.content"/>
                    <div v-html="content" id="content"></div>
<!--                    <el-form-item label="内容" style="padding-left: 25px">-->
<!--                      <el-input-->
<!--                          v-model="form.content"-->
<!--                          :rows="10"-->
<!--                          type="textarea"-->
<!--                          placeholder="Please input"-->
<!--                      />-->
<!--                    </el-form-item>-->
                  </el-form>
                  <el-button type="text" @click="exit" style="margin-left: 950px" class="exit">取消发布</el-button>
                  <el-button type="text" @click="add" style="margin-left: 1050px;" >发布</el-button>
                </div>

<!--            {{form}}-->

          </el-dialog>


          <el-dialog v-model="userslist" title="请选择指定用户" width="60%">




            <el-table
                ref="multipleTable"
                :data="user"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column
                  property="id"
                  label="编号"
                  width="150"
              ></el-table-column>
              <el-table-column
                  property="username"
                  label="用户名"
                  width="200"
              ></el-table-column>
              <el-table-column
                  property="password"
                  label="密码"
                  width="200"
              ></el-table-column>
              <el-table-column
                  property="create_time"
                  label="创建时间"
                  width="200"
              ></el-table-column>
              <el-table-column
                  property="name"
                  label="部门"
                  width="200"
              ></el-table-column>
              <el-table-column
                  property="status"
                  label="状态"
                  width="200"
              ></el-table-column>

            </el-table>

            <el-button type="text" @click="exit1" style="margin-left: 1000px" class="exit">关闭</el-button>
            <el-button type="text" @click="exit1" style="margin-left: 1050px;" >确定</el-button>

          </el-dialog>

<!--        {{form.userlist}}-->
          {{form}}


        </van-col>
      </van-row>

    </van-row>
  </div>
</template>

<script>
import axios from "axios";
import Hander from "./公共/head";
import Left from "./公共/menu";
// import TEditor from "../TEditor";
export default {
  name: "asdasd",
  data() {
    return {
      //侧边导航
      activeKey:'1',
      activeNames:[],


      outerVisible:false,
      form:{'priority':'','title':'','stime':'','type':'','etime':'','designate':'','content':'','userlist':[],'userid':localStorage.getItem('id')},
      //选中的指定用户

      //获取用户信息列表
      user:[],
      //弹出层 弹出所有用户
      userslist:false,
      messagelist:[]
    }
  },


  methods: {




    // 将选中用户存在列表中
    handleSelectionChange(val) {
      let arr = []
      for (let i=0;i<val.length;i++){
          if(arr.indexOf(val[i].id,-1)){
            arr.push(val[i].id)
          }
      }
      this.form.userlist = arr


      // console.log(val)
      //
      // console.log(this.username)

    },
    //关闭选中用户的弹窗
    exit1(){
      this.userslist = false
    },
    // 获取用户
    userlists(){
      axios.get('user/userlist/')
      .then(res=>{
        //弹出层
        this.userslist = true
        this.user = res.data.list
        console.log(res.data.list)
      })
    },

    //  添加按钮
    add(){
      if(this.form.designate==2){
        this.form.userlist = []
      }
      axios.post('user/post_Message/',this.form)
      .then(res=>{
          if(res.data.code==200){
            this.get_message()
            this.$toast.success(res.data.msg)
          }else{
            this.$toast.success(res.data.msg)
          }
        console.log(res)
      })
    },
    get_message(){
      axios.get('user/post_Message/?userid='+this.form.userid)
          .then(res=>{
            this.messagelist = res.data.list

          })
    },





    //新增按钮
    tianjia(){
      this.outerVisible = true
    },
    //关闭弹出框
    exit(){
      this.outerVisible = false
    },






  },

  mounted() {
    this.get_message()
  },

  components: {
    Hander,
    Left


  }
}
</script>

<style scoped>
.exit{
  position: relative;
  top: 40px;
}
#content {
  width: 100%;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}
</style>